<template>
  <div class="app-container">

    <!--  上半部分输入  -->
    <div>日期：{{ todayDT }}</div>
    <br/>
    <table>
      <thead>
      <tr>
        <th></th>
        <th>Korsou</th>
        <th>Flamingo</th>
        <th>Diario</th>
        <th>ST</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>1</td>
        <td>
          <el-input v-model="k1"/>
        </td>
        <td>
          <el-input v-model="f1"/>
        </td>
        <td>
          <el-input v-model="d1"/>
        </td>
        <td>
          <el-input v-model="s1"/>
        </td>
      </tr>
      <tr>
        <td>2</td>
        <td>
          <el-input v-model="k2"/>
        </td>
        <td>
          <el-input v-model="f2"/>
        </td>
        <td>
          <el-input v-model="d2"/>
        </td>
        <td>
          <el-input v-model="s2"/>
        </td>
      </tr>
      <tr>
        <td>3</td>
        <td>
          <el-input v-model="k3"/>
        </td>
        <td>
          <el-input v-model="f3"/>
        </td>
        <td>
          <el-input v-model="d3"/>
        </td>
        <td>
          <el-input v-model="s3"/>
        </td>
        <td>
          <el-button class="btn" type="primary" @click="addWinningLotteryNumbers($event)">确定</el-button>
        </td>
      </tr>
      </tbody>
    </table>


    <!--  下半部分记录  -->
    <div><br/>
      <hr/>
      <br/>
      时间：
      <el-date-picker
        v-model="startTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      -
      <el-date-picker
        v-model="endTime"
        align="right"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions">
      </el-date-picker>
      <label v-html="pass"></label>
      <el-button type="primary" @click="getWinningLotteryNumbers">搜索</el-button>
      <el-button type="primary">打印</el-button>
    </div>
    <br/>
    <table v-for="o in datas" class="en-table">
      <tr>
        <th colspan="2" class="en-th">时间</th>
        <th class="en-th">Korsou</th>
        <th class="en-th">Flamingo</th>
        <th class="en-th">Diario</th>
        <th class="en-th">ST</th>
      </tr>

      <tr>
        <td class="en-td" rowspan="3">{{ o.date }}</td>
        <td class="en-td">1</td>
        <td class="en-td">{{ o.knumber == null ? '' : o.knumber.rank1_number }}</td>
        <td class="en-td">{{ o.fnumber == null ? '' : o.fnumber.rank1_number }}</td>
        <td class="en-td">{{ o.dnumber == null ? '' : o.dnumber.rank1_number }}</td>
        <td class="en-td">{{ o.snumber == null ? '' : o.snumber.rank1_number }}</td>
      </tr>
      <tr>
        <td class="en-td">2</td>
        <td class="en-td">{{ o.knumber == null ? '' : o.knumber.rank2_number }}</td>
        <td class="en-td">{{ o.fnumber == null ? '' : o.fnumber.rank2_number }}</td>
        <td class="en-td">{{ o.dnumber == null ? '' : o.dnumber.rank2_number }}</td>
        <td class="en-td">{{ o.snumber == null ? '' : o.snumber.rank2_number }}</td>
      </tr>
      <tr>
        <td class="en-td">3</td>
        <td class="en-td">{{ o.knumber == null ? '' : o.knumber.rank3_number }}</td>
        <td class="en-td">{{ o.fnumber == null ? '' : o.fnumber.rank3_number }}</td>
        <td class="en-td">{{ o.dnumber == null ? '' : o.dnumber.rank3_number }}</td>
        <td class="en-td">{{ o.snumber == null ? '' : o.snumber.rank3_number }}</td>
      </tr>
      <br/>

    </table>

  </div>
</template>

<script>
  import axios from "axios";
  import G from "@/components/G";

  export default {
    data() {
      return {
        todayDT: '',
        pass: "&emsp;",
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },

        startTime: '',
        endTime: '',


        //<=
        datas: [],

        //添加号码
        k1: '',
        k2: '',
        k3: '',
        f1: '',
        f2: '',
        f3: '',
        d1: '',
        d2: '',
        d3: '',
        s1: '',
        s2: '',
        s3: ''
      }
    },
    methods: {
      checkTime(i) {
        if (i < 10) {
          i = "0" + i
        }
        return i;
      },

      getWinningLotteryNumbers(before) {
        let startDate = new Date(this.startTime);
        let requestStartTime = startDate.getFullYear() + '-' + this.checkTime(startDate.getMonth() + 1) + '-' + this.checkTime(startDate.getDate());
        let endDate = new Date(this.endTime);
        let requestEndTime = endDate.getFullYear() + '-' + this.checkTime(endDate.getMonth() + 1) + '-' + this.checkTime(endDate.getDate());
        let param = ''
        if (!requestStartTime.startsWith('Na') && !requestEndTime.startsWith('Na')) {
          param += '&startTime=' + requestStartTime
            + '&endTime=' + requestEndTime
        }
        if (before > 0) {
          param += '&before=' + before
        }
        axios.post(G.host + 'getWinningLotteryNumbers', param).then(res => {
          this.datas = res.data
        })
      },

      //新增
      addWinningLotteryNumbers(event) {
        event.target.blur();
        if (event.target.nodeName === "SPAN") {
          event.target.parentNode.blur();
        }


        let numbers = []

        let ok = {}
        ok.region_id = 1
        ok.rank1_number = this.k1
        ok.rank2_number = this.k2
        ok.rank3_number = this.k3
        let of = {}
        of.region_id = 2
        of.rank1_number = this.f1
        of.rank2_number = this.f2
        of.rank3_number = this.f3
        let od = {}
        od.region_id = 3
        od.rank1_number = this.d1
        od.rank2_number = this.d2
        od.rank3_number = this.d3
        let os = {}
        os.region_id = 4
        os.rank1_number = this.s1
        os.rank2_number = this.s2
        os.rank3_number = this.s3

        numbers[0] = ok
        numbers[1] = of
        numbers[2] = od
        numbers[3] = os

        // axios.post(G.host + 'addWinningLotteryNumbers', JSON.stringify(numbers), {
        axios.post(G.host + 'saveWinningNumbers', JSON.stringify(numbers), {
          headers: {
            "Content-Type": "application/json;charset=utf-8"
          }
        }).then(res => {
          this.getWinningLotteryNumbers(7)
          this.$notify({
            title: '添加数据',
            message: this.$createElement('i', {style: 'color: teal'}, res.data.data),
            duration: 2000
          })
        })
      }

    },
    mounted() {
      let date = new Date()
      this.todayDT = date.getFullYear() + '-' + this.checkTime(date.getMonth() + 1) + '-' + this.checkTime(date.getDate())
      this.getWinningLotteryNumbers(7)
    }
  }
</script>

<style lang="scss" scoped>
  .en-table, .en-th, .en-td {
    border-collapse: collapse;
    border: 1px solid gray;
    text-align: center;
  }

  .en-td {
    width: 100px;
  }

  //按钮失焦
  //.btn {
  //  color: #409eff;
  //  background: #ecf5ff;
  //  border-color: #b3d8ff;
  //}
  //
  //.btn:hover {
  //  background-color: #3f9eff;
  //  color: #fff;
  //  border-color: #3f9eff;
  //}
</style>
